<template>
  <div class="container">
    <topic-nav />
    <div class="con-topic w-70vw m-auto mb-40">
      <template v-for="(topic, index) in 100">
        <topic-box
          v-model:answer="answerList[index]"
          :class="`topic${index}`"
          :number="index + 1"
        />
      </template>
    </div>
    <topic-number-list
      :num="100"
      @toTopic="scrollToTopic"
      :answerList="answerList"
    />
  </div>
</template>
<script lang="ts" setup>
import TopicNav from "./components/TopicNav.vue";
import TopicNumberList from "./components/TopicNumberList.vue";
const answerList = ref<Array<string>>(Array(100).fill(""));
const scrollToTopic = (num: number) => {
  document
    .querySelector(`.topic${num}`)
    ?.scrollIntoView({ behavior: "smooth" });
};
</script>
